import './index.scss';
import React, { Component } from 'react';
import axios from 'axios';
import logoImg from 'images/logo-img.png';
import qs from 'qs';
import MemorizedState from 'hoc/MemorizedState';
import Notice from '../Notice';

@MemorizedState({ ignore: ['finished',  'shops', 'subItem']})
class Page extends Component {
	state = {
		shops: ''
	}

	componentDidUpdate() {
		this.props.memorize(this.state);
	}

	componentWillMount() {
		this.setState({
			...this.props.memory
		});
    document.title = '彩虹育儿疫苗预约登记表';
    axios.get('https://appapi.jzdoctor.com/config/hospital_qijian.php').then(res => {
      this.setState({ shops: res.data });
    });
  }

  submit = () => {
    let { orderNo, name, sex, mobile, cardNo, bookName, bookShop, payAmount } = this.state;

    if (!orderNo) return alert('请您输入订单号');
    if (!name) return alert('请您输入姓名');
    if (!sex) return alert('请您输入性别');
    if (!mobile) return alert('请您输入手机号');
    if (!cardNo) return alert('请您输入身份证');
    if (!bookName) return alert('请您选择预约项目');
    if (!bookShop || bookShop === '请选择预约门店') return alert('请您选择预约门店');
    if (isNaN(payAmount) || !payAmount) return alert('请您输入金额');

    if (this.requesting) return;
    this.requesting = true;
		let data = { ...this.state,platform:4 };
    data.channel = qs.parse(location.href.split('?')[1]).channel;
    delete data.shops;

    axios.post(`${APP_CONFIG.appServer}/common/review/aliHealthVaccine/saveBook`, data).then(res => {
      if (res.data.code == 0) {
        this.setState({
          finished: true
        });
				this.props.clearMemorized();
      }
      else {
        alert(res.data.msg);
        this.requesting = false;
      }
    }).finally(res => {
      this.requesting = false;
    });
  }

  updateField = (fieldName, event) => {
    this.setState({ [fieldName]: typeof event ==='string' ? event : event.target.value });
  }

  render() {
    if (this.state.finished) return <h1 style={{padding: '20px', textAlign: 'center'}}>提交成功, 请关闭本页</h1>;

    return (
      <div className="misc-booking misc-booking-register">
        <div className="misc-booking-register-hd">
          <h1>彩虹育儿疫苗预约登记表</h1>
          <p>【★请如实填写您的信息】</p>
          <p>【★如有虚假，将不会安排预约并退款】</p>
          <img src={logoImg} alt="" style={{width: '100%', marginBottom: '10px'}}/>
        </div>

        <div className="misc-booking-register-bd">
          <div className="rules">
          ★ 预约须知（请认真阅读）：<br/>
          1. 信息表只限淘宝下单彩虹育儿产品的用户；<br/>
          2. 信息登记后，将在预约当月接种前3个工作日（法定节假日休息；活动促销期间，通知时间会有所延长）通知用户安排医院并同时进行产品核销；如未按期核销，均视为放弃预约接种，将不会为您安排接种；预售产品将在预售月份接种前3个工作日安排核销确认；<br/>
          3. 未进行产品核销，不可安排接种；核销前或核销后，均可全额退款；开始接种或享受订单内服务后，不可退款；<br/>
          4. 信息表仅限填写接种人信息，为防止重复预约，每人仅限填写一次预约信息，如需更改信息，请联系彩虹育儿客服专线：021-62401766；<br/>
          5. 如有任何疑问，可通过天猫门店（阿里健康旗舰店）咨询在线客服；或拨打预约服务热线：021-62401766咨询；<br/>
          6. 接种门店请务必与淘宝下单产品门店地址匹配，若无法匹配则无法预约成功，请知悉。<br/>
          7、更多资讯欢迎关注：官方微博：彩虹育儿 ； 官方微信公众号：彩虹育儿 
          </div>
          <div className="form">
            <div className="form-row">
              <div className="form-label">
                <p>订单号：</p>
                <small>（请准确填写18位数订单号）</small>
              </div>
              <div className="form-item">
                <input type="text" className="input-text" onChange={this.updateField.bind(this, 'orderNo')} value={this.state.orderNo} />
              </div>
            </div>
            <div className="form-row">
              <div className="form-label">
                <p>接种人姓名：</p>
              </div>
              <div className="form-item">
                <input type="text" className="input-text" onChange={this.updateField.bind(this, 'name')} value={this.state.name} />
              </div>
            </div>
            <div className="form-row">
              <div className="form-label">
                <p>性别：</p>
                <small>（内地HPV疫苗仅限女性接种，请务必填写接种信息）</small>
              </div>
              <div className="form-item">
                <input type="text" className="input-text" onChange={this.updateField.bind(this, 'sex')} value={this.state.sex} />
              </div>
            </div>
            <div className="form-row">
							<div className="form-label form-label-large">
								<p>接种人手机：</p>
							</div>
							<div className="form-item">
								<input type="tel" className="input-text input-text-large" onChange={this.updateField.bind(this, 'mobile')} value={this.state.mobile} placeholder="请输入接种人的11位手机号码" />
							</div>
						</div>
            <div className="form-row">
              <div className="form-label">
                <p>身份证号：</p>
              </div>
              <div className="form-item">
                <input type="text" className="input-text" onChange={this.updateField.bind(this, 'cardNo')} value={this.state.cardNo} />
              </div>
            </div>
            <div className="form-row">
              <div className="form-label">
                <p>预约项目：</p>
              </div>
              <div className="form-item radio-group">
                <p onClick={this.updateField.bind(this, 'bookName', '九价HPV疫苗')}><input type="radio" name="bookName" value="九价HPV疫苗" checked={this.state.bookName === '九价HPV疫苗'}/>九价HPV疫苗</p>
                <p onClick={this.updateField.bind(this, 'bookName', '四价HPV疫苗')}><input type="radio" name="bookName" value="四价HPV疫苗" checked={this.state.bookName === '四价HPV疫苗'}/>四价HPV疫苗</p>
                <p onClick={this.updateField.bind(this, 'bookName', '二价HPV疫苗')}><input type="radio" name="bookName" value="二价HPV疫苗" checked={this.state.bookName === '二价HPV疫苗'}/>二价HPV疫苗</p>
                <p onClick={this.updateField.bind(this, 'bookName', '成人三价流感疫苗')}><input type="radio" name="bookName" value="成人三价流感疫苗" checked={this.state.bookName === '成人三价流感疫苗'}/>成人三价流感疫苗</p>
                <p onClick={this.updateField.bind(this, 'bookName', '成人四价流感疫苗')}><input type="radio" name="bookName" value="成人四价流感疫苗" checked={this.state.bookName === '成人四价流感疫苗'}/>成人四价流感疫苗</p>
                <p onClick={this.updateField.bind(this, 'bookName', '儿童三价流感疫苗')}><input type="radio" name="bookName" value="儿童三价流感疫苗" checked={this.state.bookName === '儿童三价流感疫苗'}/>儿童三价流感疫苗</p>
                <p onClick={this.updateField.bind(this, 'bookName', '儿童疫苗')}><input type="radio" name="bookName" value="儿童疫苗" checked={this.state.bookName === '儿童疫苗'}/>儿童疫苗</p>
                <p onClick={this.updateField.bind(this, 'bookName', '健康体检')}><input type="radio" name="bookName" value="健康体检" checked={this.state.bookName === '健康体检'}/>健康体检</p>
								<p onClick={this.updateField.bind(this, 'bookName', '流感疫苗')}><input type="radio" name="bookName" value="流感疫苗" checked={this.state.bookName === '流感疫苗'}/>流感疫苗</p>
              </div>
            </div>
            <div className="form-row">
              <div className="form-label">
                <p>下单预约门店：</p>
                <small>（选择门店务必与淘宝订单匹配）</small>
              </div>
              <div className="form-item">
                <select onChange={this.updateField.bind(this, 'bookShop')} value={this.state.bookShop}>
                  {
                    this.state.shops.split('\n').filter(i => i.trim()).map((item, index) => <option value={item.trim()} key={index}>{item.trim()}</option>)
                  }
                </select>
              </div>
            </div>
            <div className="form-row">
              <div className="form-label">
                <p>实付金额：</p>
              </div>
              <div className="form-item">
                <input type="number" placeholder="去除所有优惠后真实支付金额" className="input-text" onChange={this.updateField.bind(this, 'payAmount')} value={this.state.payAmount} />
              </div>
            </div>
            <div className="form-row">
              <div className="form-label">
                <p>收件地址（选填)：</p>
                <small>购买产品附带需寄送产品时需填，不填不寄</small>
              </div>
              <div className="form-item">
                <input type="text" className="input-text" onChange={this.updateField.bind(this, 'address')} value={this.state.address} />
              </div>
            </div>
            <div className="form-row">
                <button className="button" onClick={this.submit}>提交</button>
            </div>
            <Notice></Notice>
          </div>
        </div>
      </div>
    );
  }
}

export default Page;